import React from 'react';
import { withRouter } from 'react-router';

class Vfor extends React.Component {

  // this.props.router

  state = {
    list: [ // string[]
      'zhangsan',
      'lisi',
      'wangwu',
    ],
  };

  shouldComponentUpdate (newState, newProps) {
    if (newState.list.length === 3) {
      return false;
    }
    return true;
  }

  // 创建dom数组: ReactNode[]
  // createList () {
  //   const { list } = this.state;
  //   const domList = [];
  //   for (let i = 0; i < list.length; i++) {
  //     domList.push(<div key={ i }>{ list[i] }</div>);
  //   }
  //   return domList;
  // }

  createList () {
    return this.state.list.map((item, i) => (
      <div key={ i }>
        { item }
      </div>
    ));
  }

  render () {
    return (
      <>
        { this.createList() }
      </>
    );
  }
}

export default withRouter(Vfor); // HOC: 高阶组件
